<template>
  <a-modal
    :title="title"
    :width="800"
    :visible.sync="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="spinning">
      <a-row :gutter="24" style="margin-bottom: 20px;">
        <a-col :md="12" :sm="24" >姓名：{{customerDetailsForm.name}}</a-col>
        <a-col :md="12" :sm="24" >客户卡号：{{customerDetailsForm.card_no}}</a-col>
      </a-row>

      <!-- 新增 -->
       <template v-if="modal_type=='add'">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24" >
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="计划回访时间"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-date-picker
                  :disabled-date="disabledDate"
                  :show-time="{format:'HH:mm'}"
                  format="YYYY-MM-DD HH:mm"
                  placeholder="选择回访时间"
                  style="width: 100%"
                  v-decorator="['planScoutDate', {rules: [{ required: true, message: '请选择回访时间！' }]}]"
                />
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="回访类型"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-select style="width: 100%" v-decorator="['scoutTheme', {rules: [{ required: true, message: '请选择回访类型！' }]}]" placeholder="请选择回访类型" >
                  <a-select-option v-for="(item,index) in customerFeedback.feedbackType" :key="index" :value="item.name" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>

          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical'>
              <a-form-item label="回访目的" :wrapperCol="wrapperCol" has-feedback>
                <a-input
                  placeholder="回访目的"
                  v-decorator="['scoutPurpose', {rules: [{required: true, min:1,message: '请输入回访目的！'},{validator: validatorPurpose}]}]" />
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="12" :sm="24" >
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="计划回访人"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-select
                  :showSearch="true"
                  option-filter-prop="children"
                  option-label-prop="label"
                  style="width: 100%"
                  placeholder="请选择计划回访人,可直接搜索"
                  v-decorator="['scoutManId', {rules: [{ required: true, message: '请输入计划回访人！' }]}]"
                >
                  <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="回访话术"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-input
                  placeholder="回访话术"
                  v-decorator="['verbalContent', {rules: [{required: false, message: '请输入回访话术！'}]}]" />
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </template>
   
      <div v-if="modal_type=='add'">
           <div><span style="color:black">是否填写回访内容？</span> <a-switch  v-model="isContinue" /></div> 
           <div v-if="isContinue">
              <a-divider orientation="left" >回访内容</a-divider>
              <template >
                <a-row :gutter="24">
                  <a-col :md="12" :sm="24">
                    <a-form :form="form" layout='vertical'>
                      <a-form-item
                        label="接听状态"
                        :wrapperCol="wrapperCol"
                        has-feedback
                      >
                        <a-select style="width: 100%" v-decorator="['receiveState', {rules: [{ required: modal_type_require, message: '请选择接听状态！' }]}]" placeholder="请选择接听状态" >
                          <a-select-option v-for="(item,index) in customerFeedback.answeringStatus" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>
                  <a-col :md="12" :sm="24">
                    <a-form :form="form" layout='vertical'>
                      <a-form-item
                        label="回访方式"
                        :wrapperCol="wrapperCol"
                        has-feedback
                      >
                        <a-select style="width: 100%" v-decorator="['scoutMode', {rules: [{ required: modal_type_require, message: '请选择回访方式！' }]}]" placeholder="请选择回访方式" >
                          <a-select-option v-for="(item,index) in customerFeedback.feedbackMethod" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>

                </a-row>
                <a-row :gutter="24" type="flex" align="middle">
                  <a-col :md="12" :sm="24">
                    <a-form :form="form" layout='vertical'>
                      <a-form-item
                        label="回访内容"
                        has-feedback
                      >
                        <a-textarea
                          :rows="4"
                          placeholder="请填写回访内容"
                          style="width: 100%"
                          v-decorator="['scoutContent', {rules: [{ required: modal_type_require, message: '请填写回访内容！' }]}]"
                        >
                        </a-textarea>
                      </a-form-item>
                    </a-form>
                  </a-col>
                  <a-col :md="12" :sm="24">
                    <a-form :form="form" layout='vertical' class="radio-group" >
                      <a-form-item label="是否有效沟通" has-feedback>
                        <a-radio-group  v-decorator="['isValid', {rules: [{ required: modal_type_require, message: '请选择是否有效沟通！' }]}]"  >
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="0">否</a-radio>
                        </a-radio-group>
                      </a-form-item>
                    </a-form>
                  </a-col>
                </a-row>
              </template>
           </div>
          
      </div>


      <!-- 编辑 -->
      <template v-if="modal_type=='edit'">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24" >
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="计划回访时间"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-date-picker
                  :disabled-date="disabledDate"
                  :show-time="{format:'HH:mm'}"
                  format="YYYY-MM-DD HH:mm"
                  placeholder="选择回访时间"
                  style="width: 100%"
                  v-decorator="['planScoutDate', {rules: [{ required: true, message: '请选择回访时间！' }]}]"
                />
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="回访类型"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-select style="width: 100%" v-decorator="['scoutTheme', {rules: [{ required: true, message: '请选择回访类型！' }]}]" placeholder="请选择回访类型" >
                  <a-select-option v-for="(item,index) in customerFeedback.feedbackType" :key="index" :value="item.name" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>

          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical'>
              <a-form-item label="回访目的" :wrapperCol="wrapperCol" has-feedback>
                <a-input
                  placeholder="回访目的"
                  v-decorator="['scoutPurpose', {rules: [{required: true, min:1,message: '请输入回访目的！'},{validator: validatorPurpose}]}]" />
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="12" :sm="24" >
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="计划回访人"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-select
                  :showSearch="true"
                  option-filter-prop="children"
                  option-label-prop="label"
                  style="width: 100%"
                  placeholder="请选择计划回访人,可直接搜索"
                  v-decorator="['scoutManId', {rules: [{ required: true, message: '请输入计划回访人！' }]}]"
                >
                  <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="回访话术"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-input
                  placeholder="回访话术"
                  v-decorator="['verbalContent', {rules: [{required: false, message: '请输入回访话术！'}]}]" />
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </template>

       <div v-if="modal_type=='edit'">
           <div><span style="color:black">是否填写回访内容？</span> <a-switch  v-model="isContinue" /></div> 
           <div v-if="isContinue">
              <a-divider orientation="left" >回访内容</a-divider>
              <template >
                <a-row :gutter="24">
                  <a-col :md="12" :sm="24">
                    <a-form :form="form" layout='vertical'>
                      <a-form-item
                        label="接听状态"
                        :wrapperCol="wrapperCol"
                        has-feedback
                      >
                        <a-select style="width: 100%" v-decorator="['receiveState', {rules: [{ required: modal_type_require, message: '请选择接听状态！' }]}]" placeholder="请选择接听状态" >
                          <a-select-option v-for="(item,index) in customerFeedback.answeringStatus" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>
                  <a-col :md="12" :sm="24">
                    <a-form :form="form" layout='vertical'>
                      <a-form-item
                        label="回访方式"
                        :wrapperCol="wrapperCol"
                        has-feedback
                      >
                        <a-select style="width: 100%" v-decorator="['scoutMode', {rules: [{ required: modal_type_require, message: '请选择回访方式！' }]}]" placeholder="请选择回访方式" >
                          <a-select-option v-for="(item,index) in customerFeedback.feedbackMethod" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                        </a-select>
                      </a-form-item>
                    </a-form>
                  </a-col>

                </a-row>
                <a-row :gutter="24" type="flex" align="middle">
                  <a-col :md="12" :sm="24">
                    <a-form :form="form" layout='vertical'>
                      <a-form-item
                        label="回访内容"
                        has-feedback
                      >
                        <a-textarea
                          :rows="4"
                          placeholder="请填写回访内容"
                          style="width: 100%"
                          v-decorator="['scoutContent', {rules: [{ required: modal_type_require, message: '请填写回访内容！' }]}]"
                        >
                        </a-textarea>
                      </a-form-item>
                    </a-form>
                  </a-col>
                  <a-col :md="12" :sm="24">
                    <a-form :form="form" layout='vertical' class="radio-group" >
                      <a-form-item label="是否有效沟通" has-feedback>
                        <a-radio-group  v-decorator="['isValid', {rules: [{ required: modal_type_require, message: '请选择是否有效沟通！' }]}]"  >
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="0">否</a-radio>
                        </a-radio-group>
                      </a-form-item>
                    </a-form>
                  </a-col>
                </a-row>
              </template>
           </div>
          
      </div>

      <!-- <a-divider orientation="left" v-if="modal_type=='edit'" >回访内容</a-divider>
      <template v-if="modal_type=='edit'">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="接听状态"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-select style="width: 100%" v-decorator="['receiveState', {rules: [{ required: modal_type_require, message: '请选择接听状态！' }]}]" placeholder="请选择接听状态" >
                  <a-select-option v-for="(item,index) in customerFeedback.answeringStatus" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="回访方式"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-select style="width: 100%" v-decorator="['scoutMode', {rules: [{ required: modal_type_require, message: '请选择回访方式！' }]}]" placeholder="请选择回访方式" >
                  <a-select-option v-for="(item,index) in customerFeedback.feedbackMethod" :key="index" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </a-col>

        </a-row>
        <a-row :gutter="24" type="flex" align="middle">
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="回访内容"
                has-feedback
              >
                <a-textarea
                  :rows="4"
                  placeholder="请填写回访内容"
                  style="width: 100%"
                  v-decorator="['scoutContent', {rules: [{ required: modal_type_require, message: '请填写回访内容！' }]}]"
                >
                </a-textarea>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form :form="form" layout='vertical' class="radio-group" >
              <a-form-item label="是否有效沟通" has-feedback>
                <a-radio-group  v-decorator="['isValid', {rules: [{ required: modal_type_require, message: '请选择是否有效沟通！' }]}]"  >
                  <a-radio :value="1">是</a-radio>
                  <a-radio :value="0">否</a-radio>
                </a-radio-group>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </template> -->
     
      <!--取消-->
      <template v-if="modal_type=='cancel'">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24" >
            <a-form :form="form" layout='vertical'>
              <a-form-item
                label="取消原因"
                :wrapperCol="wrapperCol"
                has-feedback
              >
                <a-textarea
                  :rows="4"
                  placeholder="请填写取消原因"
                  v-decorator="['cancelReason', {rules: [{ required: true, message: '请填写取消原因！' }]}]"
                >
                </a-textarea>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </template>
    </a-spin>
  </a-modal>
</template>

<script>
import {
  AddCustomerReturn,
  CancelCustomerReturn,
  CustomerFeedback,
  EditCustomerReturn
} from '@/api/modular/main/customer/customerReturnVisit'
import {AllHisUser} from '@/api/customer/customer'
import moment from 'moment'

export default {
    props:{
      customerId:{
        type:String,
        default:''
      }
    },
    data () {
      return {
        spinning:false,
        customerDetailsForm:{},
        row_record:{},
        modal_type:'',
        defaultScoutManIdId:'',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        data: [],
        customerFeedback:{},
        allHisUser:{},//计划回访人对象
        isContinue:false
      }
    },
    watch:{
      modal_type(val){
        return val
      }
    },
    computed:{
      title(){
        if(this.modal_type=='edit'){
          return '编辑回访'
        }else if(this.modal_type=='cancel'){
          return '取消回访'
        }else {
          return '增加回访计划'
        }
      },
      modal_type_require(){
        return true
        // if(this.modal_type=='edit'){
        //   return true
        // }
        // return false
      }
    },
    created() {
      //  this.getBaseFormInfo()
    },
    methods: {
      //时间格式化
      moment,
      //不可选择日期
      disabledDate(current) {
        // return current && current < moment().endOf('day') //今天之后的时间
        return current < moment().add(-1, 'd')
      },
      /**
       表单校验年龄
       * */
      validatorPurpose (rule, value, callback) {
        if(!value||value.trim()==''){
          callback('不能为空格！')
        }else{
          callback()
        }
      },
      //获取表单相关接口
      getBaseFormInfo(){
        new Promise((resolve,reject)=>{
              CustomerFeedback().then(res=>{
              // console.log('回访相关表单接口',res)
              this.customerFeedback=res
              resolve()
            })
        }).then(()=>{
            AllHisUser().then(res=>{
             this.spinning=false
          // console.log('全员员工接口',res)
          this.defaultScoutManIdId= res.user.id
          this.allHisUser=res

        })
        })
       
       
      },
      changeApplication(code){
        console.log('code',code)
      },
      // 初始化方法
      add (customerDetailsForm,row_record,modal_type) {
        this.spinning=true
        this.getBaseFormInfo()
        this.customerDetailsForm = customerDetailsForm
        this.row_record = row_record
        this.modal_type = modal_type
        // console.log('888888888',this.modal_type)
        this.visible = true
        this.form.resetFields()
         
        setTimeout(() => {
            if(this.modal_type == 'edit'){
           this.form.setFieldsValue(
            {
              planScoutDate: moment(row_record.plan_scout_date).format('YYYY-MM-DD HH:mm:ss'),
              scoutTheme:row_record.scout_theme,
              scoutManId:row_record.scout_man_id,
              scoutPurpose:row_record.scout_purpose,
              verbalContent:row_record.verbal_content
            })
        }
        }, 600);

       


      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (errors) {
            console.log('表单校验未通过111',values)
            this.confirmLoading = false
            return
          }
          //此处为编辑修改
          if(this.modal_type=='edit'){
            console.log('编辑回访')
            values.id=this.row_record.feedbackId
            EditCustomerReturn(values).then(res=>{
              console.log('提交结果为',res)
              if(res.code==200){
                this.$message.success({
                  content:'修改成功',
                  duration:0.5,
                  onClose:()=>{
                    this.$emit('reloadReturnPlan')
                    this.visible=false
                  }
                })
              }else{
                this.$message.info(res.message)
              }
              this.confirmLoading = false
            })
            return
          }
          //此处为编辑修改
          if(this.modal_type=='cancel'){
            console.log('取消')
            values.id=this.row_record.feedbackId
            CancelCustomerReturn(values).then(res=>{
              console.log('提交结果为',res)
              if(res.code==200){
                this.$message.success({
                  content:'取消成功',
                  duration:0.5,
                  onClose:()=>{
                    this.visible=false
                    this.$emit('reloadReturnPlan')
                  }
                })
              }else{
                this.$message.info(res.message)
              }
              this.confirmLoading = false
            })
            return
          }
          values.planScoutDate = moment(values.planScoutDate).format('YYYY-MM-DD HH:mm:ss')
          values.customerId=this.customerId
          AddCustomerReturn(values).then(res=>{
            console.log('提交结果为',res)
            if(res.code==200){
              this.$message.success({
                content:'添加成功',
                duration:0.5,
                onClose:()=>{
                  this.visible=false
                  this.confirmLoading = false
                  this.$emit('reloadReturnPlan')
                }
              })
            }else{
              this.$message.info({
                content:res.message,
                duration:0.5,
                onClose:()=>{
                  this.confirmLoading = false
                }
              })
            }
          })
          console.log('表单校验已通过222',values)
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        // 清理子表单中数据
        this.data = []
        // 清理时间
      }
    }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item{
  margin-bottom: 8px;
}
</style>
